@charset "utf-8";
@import "reset";

.box{
    width: 600px;
    margin: 0 auto;
    height: 500px;
    // border:  1px solid #333;
    padding-top: 100px;
    // 图片列表

    >.img_box{
        width: 600px;
        height: 320px;
        position: relative;
        >ul{
            position: relative;
           

            >li{
                width: 500px;
                height: 300px;
                position: absolute;
                overflow: hidden;
                box-sizing: border-box;
                transition: 0.2s ease-in-out;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .list01 {
                transform: translateX(0) scale(0.8);
                z-index: 1;
                transform-origin: left center;
            }
            .list02 {
                transform: translateX(50px) scale(1);
                z-index: 3;
            }
            .list03 {
                transform: translateX(200px) scale(0.8);
                z-index: 1;
                transform-origin: left center;
            }
            .list04 {
                transform: translateX(100px) scale(0.8);
                transform-origin: left center;
            }
        }
       
       
          // 左右按钮
    >.l_btn{
        width: 50px;
        height: 50px;
        border-radius: 50%; 
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99999;
        text-align: center;
        line-height: 50px; 
        left: 5px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 30px;
  color: #bababa;

    }
     >.r_btn{
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 99999;
            text-align: center;
            line-height: 50px; 
            position: absolute;
            right: 5px;
            font-size: 30px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            color: #bababa;

            cursor: pointer;
        }

    }
 
        // 小圆点
     .dot_box{
         width: 50px;
         height: 20px;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;

         >span{
             
            width: 10px;
            height: 10px;
            background-color: green;
            border-radius: 50%;
            cursor: pointer;

         }
         .dot_active{
            background-color: red
         }

        }
}